<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        
        div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <!-- 移动端拖拽盒子的效果 -->
    <!-- 1. CSS样式上给盒子一个绝对定位 -->
    <!-- 2. 只需要改变盒子的top left 就可以 实现盒子位置的改变 -->
    <!-- 3. 获取手指touchmove时 坐标 把坐标和盒子的 top和left进行一个关联 -->
    <div></div>
    <script>
        var div = document.querySelector('div');
        var X = 0,Y = 0
        // 只要手指按在div上 就获取 手指在div中的坐标， 记录下拖动开始的初始坐标
        // x坐标就用 e.targetTouches[0].pageX - div.offsetLeft
        div.addEventListener('touchstart', function(e){
            X = e.targetTouches[0].pageX - div.offsetLeft
            Y = e.targetTouches[0].pageY - div.offsetTop
        })

        div.addEventListener('touchmove', function(e){
            // 防止拖动的同时，页面发生滚动，把默认行为去掉
            e.preventDefault()
             // 把div的偏移值 和  手指移动时的坐标关联起来 就可以了
            div.style.left = e.targetTouches[0].pageX - X + 'px'
            div.style.top = e.targetTouches[0].pageY - Y + 'px'
        })
    </script>
</body>

</html>